<template>
  <div v-if="detail.shipping_type==5 && detail.self_take_address">
    <div class="item-block item-block2">
      <div class="title">门店地址</div>
      <div class="line-con">
        <div class="label">门店地址：</div>
        <div class="line-detail">{{detail.self_take_address}}</div>
      </div>
    </div>
    <div class="item-block item-block2" v-show="showRider">
      <div class="title">骑手信息</div>
      <div class="line-con">
        <div class="label">骑手姓名：</div>
        <div class="line-detail">{{delivery_name}}</div>
      </div>
      <div class="line-con">
        <div class="label">骑手手机：</div>
        <div class="line-detail">{{delivery_phone}}</div>
      </div>
      <div class="line-con">
        <div class="label">骑手位置：</div>
        <div class="line-detail">
          <van-button class="btn change-id" round @click="viewLocation">查看位置</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { isAPP } from '@/utils/validate'
import { getKnightInfo } from '@/api/order/order.js'
import small from '@/smallapp/small'
export default Vue.extend({
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      showRider: false,
      delivery_name: '',
      delivery_phone: '',
      delivery_latitude: '',
      delivery_longitude: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getKnightInfo().then(res => {
        if (res && res.status == 1) {
          this.delivery_name = res.delivery_info.delivery_name
          this.delivery_phone = res.delivery_info.delivery_phone
          this.delivery_latitude = res.delivery_info.delivery_latitude
          this.delivery_longitude = res.delivery_info.delivery_longitude
          this.showRider = true
        } else {
          this.showRider = false
        }
      })
    },
    // 点击查看地图
    viewLocation() {
      const item = {
        longitude: this.delivery_longitude,
        latitude: this.delivery_latitude,
        shop_name: '骑手位置'
      }
      if (isAPP()) {
        // 高德查看地图
        this.locationLink(item, 1)
      } else {
        // 腾讯查看地图
        this.locationLink(item, 2)
      }
    },
    locationLink(item, type) {
      let url = ''
      if (type == 1) {
        url = 'https://m.amap.com/navi/?dest=' + item.longitude + ',' + item.latitude + '&destName=' + item.shop_name + '&key=552f0986c98fa36d395d95d52f3e9706'
      } else if (type == 2) {
        url = 'https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:' + item.latitude + ',' + item.longitude + ';title:' + item.shop_name + '&key='+small.wxCache('tencentMapKey')+'&referer=storelocation'
      }
      location.href = url
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/order/detail";
</style>